<template>
<div class="slot-box">
	<Me-Slot1>内容插槽111</Me-Slot1>

	<Me-Slot2>
		<h1 slot="header">我是 header</h1>  
		<h1 slot="mainer">我是 mainer</h1>  
		<h1 slot="footer">我是 footer</h1>  
	</Me-Slot2>
	 slot-scope="test"
	<Me-Slot3>
		<template v-slot>
			{{test.top}}:{{test.left}}
		</template>
	</Me-Slot3>

	<Me-Slot4>
		<template v-slot:testname1>
			{{test.top}}-
		</template>
		<template v-slot:testname2>
			-{{test.left}}
		</template>
	</Me-Slot4>

	<Me-Slot5>
		<template v-slot:[dynamicSlotName]>
			{{test.top}}
		</template>
	</Me-Slot5>
</div>
</template>

<script>
// @ is an alias to /src
import MeSlot1 from '@/components/MeSlot1.vue'
import MeSlot2 from '@/components/MeSlot2.vue'
import MeSlot3 from '@/components/MeSlot3.vue'
import MeSlot4 from '@/components/MeSlot4.vue'
import MeSlot5 from '@/components/MeSlot5.vue'

export default {
	name: 'SlotTest',
	components: {
		'Me-Slot1': MeSlot1,
		'Me-Slot2': MeSlot2,
		'Me-Slot3': MeSlot3,
		'Me-Slot4': MeSlot4,
		'Me-Slot5': MeSlot5,
	},
	data () {
		return {
			test: {
				top: 100,
				left: 200,
			},
			//动态插槽名-变量
			dynamicSlotName: 'testname1',
		};
	},
	mounted () {
        console.log('ExampleList1:');
        console.log(this.$storeTest);
    },
}
</script>
